<template>
  <div class="box">
    <div class="content">
      <div class="title">
        <!--    进出口      -->
        <span class="title_item">{{customsName}}</span>
        <!--    hs编码      -->
        <span class="title_item" v-if="info.hs">HS Code/HS编码：{{info.hs}}</span>
        <!--    开始时间      -->
        <span class="title_item">From /从：{{filterTime(info.dateShow[0])}} </span>
        <!--    结束时间      -->
        <span class="title_item">To /到：{{filterTime(info.dateShow[1])}}  </span>
        <!--    供应商      -->
        <span class="title_item" v-if="info.Shipper_name">Shipper name/供应商：{{info.Shipper_name}}</span>
        <!--    采购商      -->
        <span class="title_item" v-if="info.Consignee_name">Consignee name/采购商：{{info.Consignee_name}}</span>
        <!--    国家地区      -->
        <span class="title_item" v-if="info.country">Country/国家：{{info.country}}</span>
      </div>

      <!--   供应商分析   -->
      <seller ref="seller" @update="updateBuyer" :info="info"></seller>

      <!--   采购商分析   -->
      <buyer ref="buyer" @update="updateHs" :info="info"></buyer>

      <!--   hsCode分析   -->
      <hs-code ref="hsCode" @update="updateCountry" :info="info"></hs-code>

      <!--   贸易国分析   -->
      <country ref="country" @update="updateMonth" :info="info"></country>

      <!--   月份分析   -->
      <month ref="month" :info="info"></month>
    </div>
  </div>
</template>

<script>
    import buyer from "@/components/ocean/exit/buyer";
    import country from "@/components/ocean/exit/country";
    import hsCode from "@/components/ocean/exit/hsCode";
    import month from "@/components/ocean/exit/month";
    import seller from "@/components/ocean/exit/seller";
    import {getTname} from '@/api/automation/customs'

    export default {
        name: "exitTable",
        components: {
            buyer,
            country,
            hsCode,
            month,
            seller
        },
        data() {
            return {
                urlData: {
                    c: '',
                    w: '',
                    u: '',
                    cls: '',
                    cl: ''
                },
                info: {},
                customsName: '',
            }
        },
        created() {
            this.info = JSON.parse(this.$route.query.info)
        },
        mounted() {
            let name = this.info.en.split(" ")[0]
            this.customsName = name + ' / ' + this.info.ch
            this.urlData.c = this.info.c
            this.urlData.w = this.info.w
            this.urlData.u = this.info.u
            this.urlData.cls = this.info.cls
            this.urlData.cl = this.info.cl

            this.init()
        },
        methods: {
            init() {
                getTname(this.urlData).then(() => {
                    this.$refs.seller.init()
                })
            },
            filterTime(str) {
                if (this.info.ch.indexOf('航运') != -1) {
                    return str.split("-")[0]
                } else {
                    return str
                }
            },
            updateBuyer() {
                this.$refs.buyer.init()
            },
            updateHs() {
                this.$refs.hsCode.init()
            },
            updateCountry() {
                this.$refs.country.init()
            },
            updateMonth() {
                this.$refs.month.init()
            }
        }
    }
</script>

<style scoped lang="scss">
  .title {
    padding: 15px 35px;
    box-sizing: border-box;
    background-color: white;
    border-radius: 20px;
    margin-bottom: 20px;
  }

  .title_item {
    margin-right: 50px;
    display: inline-block;
    margin-top: 5px;
    display: inline-block;
  }

  .box {
    background-color: #F5F5F5;
    height: 100%;
    overflow: auto;
  }

  .content {
    width: 1200px;
    margin: 30px auto;
    overflow-y: auto;
  }

</style>
